<template>
  <!-- 专科频道 -->
  <Header :title="'专科频道'" />
  <div class="content">
    <p class="title">特色专科</p>
    <div class="feature">
      <div v-for="item in feature" :key="item.id">
        <img :src="item.img" alt="" />
      </div>
    </div>
    <p class="title">常见科室</p>
    <div class="department">
      <div v-for="item in department" :key="item.id" @click="goTo">
        <img :src="item.img" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";

import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

import { getIndex } from "../utils/api";

export default {
  setup() {
    const router = useRouter();

    const feature = ref([
      {
        id: 1,
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/specialized/feature1.png",
      },
      {
        id: 2,
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/specialized/feature2.png",
      },
      {
        id: 3,
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/specialized/feature3.png",
      },
    ]);

    const department = ref([]);

    const getDepartment = async () => {
      const res = await getIndex();
      department.value = res.result[0].zkpd;
    };

    const goTo = () => {
      router.push("/home/seeDoctor/allDepartments");
    };

    onMounted(() => {
      getDepartment();
    });

    return {
      feature,
      department,
      goTo,
      getDepartment,
    };
  },
  components: {
    Header,
  },
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.content {
  padding: 0 14px;

  .title {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
  }

  .feature {
    display: flex;
    justify-content: space-around;

    img {
      width: 110px;
      height: 144px;
    }
  }

  .department {
    display: flex;
    flex-wrap: wrap;

    > div {
      width: 25%;
      text-align: center;
      font-size: 12px;
      color: #333;

      img {
        width: 49px;
        height: 40px;
      }
    }
  }
}
</style>
